<template>
  <div class="all">
    <div class="top">
      <div class="top-left">
        <div class="prefix"></div>
        <div class="text">挂号详情</div>
      </div>
    </div>
    <div class="center">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>患者信息</span>
          <el-button style="float: right; padding: 3px 0" type="text"
            >返回</el-button
          >
        </div>
        <div class="text item">
          <div class="text-left">
            <div class="hang">
              <div class="one">患者姓名 <span>李四</span></div>
              <div class="two">就诊卡号<span>5000909000</span></div>
            </div>
            <div class="hang">
              <div class="one">证件类型 <span>身份证号</span></div>
              <div class="two">证件号码<span>5000944409000</span></div>
            </div>
            <div class="hang">
              <div class="one">微信昵称 <span>七尾Sam</span></div>
              <div class="two">手机号码<span>5000323909000</span></div>
            </div>
            <div class="hang">
              <div class="one">
                就诊人地址 <span>北京市朝阳区**路**号**小区</span>
              </div>
            </div>
          </div>
          <div class="text-right">
            <div class="img">
              患者头像
              <div class="yuan"></div>
            </div>
            <div class="relation">关系<span>本人</span></div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="bottom">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>预约信息</span>
        </div>
        <div class="text item tom">
          <div class="text-left">
            <div class="hang">
              <div class="one">
                就诊医院 <span>北京市第一人民医院/东院</span>
              </div>
              <div class="two">就诊卡号<span>500094243209000</span></div>
              <div class="two">
                就诊科室<span>消化内科-门诊3楼东区501</span>
              </div>
            </div>
            <div class="hang">
              <div class="one">证件类型 <span>身份证号</span></div>
              <div class="two">证件号码<span>50009094242000</span></div>
              <div class="two">证件号码<span>50009094242000</span></div>
            </div>
            <div class="hang">
              <div class="one">微信昵称 <span>七尾Sam</span></div>
              <div class="two">手机号码<span>5000902343249000</span></div>
              <div class="two">手机号码<span>5000902343249000</span></div>
            </div>
            <div class="hang">
              <div class="one">微信昵称 <span>七尾Sam</span></div>
              <div class="two">手机号码<span>5000902343249000</span></div>
              <div class="two">手机号码<span>5000902343249000</span></div>
            </div>
            <div class="hang">
              <div class="one">取消时间 <span>2020-12-12 10:09:09</span></div>
            </div>
            <div class="hang">
              <div class="one">
                挂号备注 <input type="text" placeholder="请输入关键字" />
              </div>
            </div>
            <div class="hang but">
              <button class="change">保存</button>
              <button class="change">取消</button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "Booking",
  props: ["goods"],
  data() {
    return {};
  },
  methods: {},
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.all {
  height: 100%;
  color: #333333;
  background-color: #f3f8ff;
}
.top {
  display: flex;
  height: 90px;
  /* border: 1px solid red; */
}
.top-left {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: justify;
  /* width:100%;
  height: 200px; */
  /*  */
}
.prefix {
  width: 24px;
  height: 8px;
  background: inherit;
  background-color: inherit;
  background-color: rgba(0, 110, 255, 1);
  border: none;
  border-radius: 4px;
  box-shadow: none;
  font-size: 16px;
  color: #006eff;
  margin-right: 20px;
}
.text {
  font-family: "PingFangHK-Regular", "PingFang HK", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: none;
  color: #333333;
}
.center {
  margin-bottom: 20px;
}
.text {
  display: flex;
}
.text-left .one,
.two,
.relation,
.img {
  display: inline-block;
  color: #aaaaaa;
  font-size: 14px;
  padding: 40px 0 0 20px;
}
.text-left,
.text-right {
  width: 50%;
}
span {
  display: inline-block;
  padding-left: 20px;
  color: black;
  width: 150px;
  /* border: 1px solid red; */
}
.text-right {
  position: relative;
}
.img {
  position: absolute;
  top: 0px;
  left: 0;
  display: flex;
  /* border: 1px solid red; */
  line-height: 64px;
  justify-content: center;
}
.yuan {
  margin-left: 50px;
  display: inline-block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(0, 110, 255, 0.0980392156862745);
}
.relation {
  position: absolute;
  top: 100px;
  left: 0;
}
.relation span {
  display: inline-block;
  padding-left: 100px;
}
.tom span {
  width: 250px;
}
.tom .one input {
  width: 512px;
  height: 41px;
  padding-left: 20px;
  font-size: 13px;
  color: rgb(153, 153, 153);
  border: 1px solid #e8f2ff;
}
.but {
  margin: 10px 0 0 85px;
}
.change {
  width: 120px;
  height: 40px;
  background-color: rgba(0, 110, 255, 1);
  color: white;
  border-radius: 4px;
  border: none;
}
.change:last-child{
  background-color:#e8f2ff ;
  color:rgba(0, 110, 255, 1) ;
  margin-left: 20px;
}
.change:hover{
  background-color: rgba(0, 110, 255, 1);
  color: white;
}
</style>
